<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <title>header-footer visual tests</title>
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script>
    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-grid.html">`);

    const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
    document.documentElement.setAttribute('dir', dir);
  </script>
  <script src="../../demo/grid-demo-data.js"></script>
  <link href="../../demo/x-data-provider.html" rel="import">
</head>

<body>
  <style media="screen">
    .capture-block {
      display: inline-block;
      width: 200px;
    }
  </style>

  <div class="capture-block" id="header-footer">
    <dom-bind>
      <template>
        <custom-style>
          <style>
            vaadin-grid {
              height: 100px;
            }
          </style>
        </custom-style>
        <x-array-data-provider items="{{items}}"></x-array-data-provider>
        <vaadin-grid items="[[items]]" size="200">
          <template class="row-details">
            [[index]]
          </template>
          <vaadin-grid-column>
            <template class="header">header</template>
            <template>[[index]]</template>
            <template class="footer">footer</template>
          </vaadin-grid-column>
        </vaadin-grid>
        <br>
        <vaadin-grid items="[[items]]" size="200">
          <template class="row-details">
            [[index]]
          </template>
          <vaadin-grid-column>
            <template>[[index]]</template>
          </vaadin-grid-column>
        </vaadin-grid>
      </template>
    </dom-bind>
  </div>
</body>
